<template>
    <div class="qilin-animation">
        <QilinExplain title="3D旋转动画" date="2022-11-29">
            <template v-slot:content>
                <div class="qilin-animation-rorate">
                    <div class="qilin-animation-rorate-box" id="wrap1">
                        <img src="@/assets/images/animation/image1.jpg" alt="">
                        <img src="@/assets/images/animation/image2.jpg" alt="">
                        <img src="@/assets/images/animation/image3.jpg" alt="">
                        <img src="@/assets/images/animation/image4.jpg" alt="">
                        <img src="@/assets/images/animation/image5.jpg" alt="">
                        <img src="@/assets/images/animation/image6.jpg" alt="">
                        <img src="@/assets/images/animation/image7.jpg" alt="">
                        <img src="@/assets/images/animation/image6.jpg" alt="">
                        <img src="@/assets/images/animation/image7.jpg" alt="">
                        <img src="@/assets/images/animation/image8.jpg" alt="">
                        <img src="@/assets/images/animation/image9.jpg" alt="">
                        <p></p>
                    </div>
                </div>
                <CodeMirror :codeValue="getCodeValue1"></CodeMirror>
            </template>
        </QilinExplain>
        <QilinExplain title="自适应拖拽" date="2022-11-30">
            <template v-slot:content>
                <div class="qilin-animation-drag">
                    <ul class="qilin-animation-drag-box">
                        <li><img src="@/assets/images/animation/image1.jpg" alt=""></li>
                        <li><img src="@/assets/images/animation/image2.jpg" alt=""></li>
                        <li><img src="@/assets/images/animation/image3.jpg" alt=""></li>
                        <li><img src="@/assets/images/animation/image4.jpg" alt=""></li>
                        <li><img src="@/assets/images/animation/image5.jpg" alt=""></li>
                        <li><img src="@/assets/images/animation/image6.jpg" alt=""></li>
                        <li><img src="@/assets/images/animation/image7.jpg" alt=""></li>
                        <li><img src="@/assets/images/animation/image8.jpg" alt=""></li>
                        <li><img src="@/assets/images/animation/image9.jpg" alt=""></li>
                    </ul>
                </div>
                <CodeMirror :codeValue="getCodeValue2"></CodeMirror>
            </template>
        </QilinExplain>
    </div>
</template>
<script>
import Qilin from "qilin-utils";

import QilinExplain from "@/components/QilinExplain.vue";
import CodeMirror from "@/components/CodeMirror.vue";
export default {
    components:{
        QilinExplain,
        CodeMirror
    },
    computed:{
        // 获取3D旋转动画的核心代码
        getCodeValue1(){
            return `
                // html部分
                <div class="qilin-animation-rorate">
                    <div class="qilin-animation-rorate-box" id="wrap">
                        <img src="@/assets/images/animation/image1.jpg" alt="">
                        <img src="@/assets/images/animation/image2.jpg" alt="">
                        <img src="@/assets/images/animation/image3.jpg" alt="">
                        <img src="@/assets/images/animation/image4.jpg" alt="">
                        <img src="@/assets/images/animation/image5.jpg" alt="">
                        <img src="@/assets/images/animation/image6.jpg" alt="">
                        <img src="@/assets/images/animation/image7.jpg" alt="">
                        <img src="@/assets/images/animation/image6.jpg" alt="">
                        <img src="@/assets/images/animation/image7.jpg" alt="">
                        <img src="@/assets/images/animation/image8.jpg" alt="">
                        <img src="@/assets/images/animation/image9.jpg" alt="">
                        <p></p>
                    </div>
                </div>
                // js部分
                methods:{
                    // 3D旋转动画
                    initRotate(){
                        let oWrap=document.getElementById("wrap");
                        let aImg=oWrap.getElementsByTagName("img");
                        //让盒子自适应的垂直居中
                        (function mTop(){
                            //获取浏览器窗口可视区域的高度
                            // let H=document.documentElement.clientHeight;
                            let H=Qilin.Element.getNodeHeight(".qilin-animation-rorate-box");
                            // oWrap.style.marginTop=H/2 - 180 + "px";
                            window.onresize=mTop;
                        })();
                        //图片初始动画
                        let len=aImg.length;//获取图片个数
                        let deg=360/len;//每张图片占的角度
                        for(let i=0;i<len;i++){
                            aImg[i].style.transform="rotateY("+i*deg+"deg) translateZ(350px)";
                            aImg[i].style.transition="1s "+ (len-1-i)*0.1 + "s";
                        };
                        //鼠标事件（按下，移动，抬起）--拖拽旋转
                        let lastX,lastY,nowX,nowY,minX,minY,roX=0,roY=0,timer;
                        oWrap.onmousedown=function(e){
                            clearInterval(timer);
                            let event=e||window.event;
                            //获取鼠标按下去的坐标位置
                            lastX=event.clientX;
                            lastY=event.clientY;
                            this.onmousemove=function(e){
                                let ev=e||window.event;
                                //移动过程中鼠标的坐标位置
                                nowX=ev.clientX;
                                nowY=ev.clientY;
                                //计算出鼠标坐标的差值
                                minX=nowX-lastX;
                                minY=nowY-lastY;
                                //计算容器旋转的角度
                                roX -= minY*0.1;//当上下转的时候是围绕X轴转，应取反，随着鼠标的方向而转,乘0.1是使其转的慢点
                                roY += minX*0.2;//当左右转的时候是围绕Y轴转
                                //让整个图片容器围绕鼠标旋转
                                oWrap.style.transform="rotateX("+roX+"deg) rotateY("+roY+"deg)";
                                lastX=nowX;
                                lastY=nowY;
                            };
                            this.onmouseup=function(){
                                this.onmousemove=null;
                                this.onmouseup=null;
                                timer=setInterval(function(){//当鼠标松开后，会逐渐转动到停止
                                    minX *=0.95;//让值逐渐减小
                                    minY *=0.95;
                                    roX -=minY*0.1;
                                    roY +=minX*0.2;
                                    oWrap.style.transform="rotateX("+roX+"deg) rotateY("+roY+"deg)";
                                    //当minX达到足够小的值时清除定时器
                                    if(Math.abs(minX)<0.1 && Math.abs(minY)<0.1){
                                        clearInterval(timer);
                                    };
                                },1000/60);
                            };
                            return false;//阻止浏览器默认拖拽功能
                        }
                    }
                }
                // css部分
                .qilin-animation-rorate{
                    height:700px;
                    background-color:#222;
                    perspective: 800px;
                    // margin-top:75px;
                    >.qilin-animation-rorate-box{
                        position:relative;
                        width:120px;
                        height:180px;
                        margin:auto;
                        padding-top:240px;
                        /* 设置3d环境 */
                        transform-style: preserve-3d;
                        >img{
                            position: absolute;
                            width:133px;
                            height:200px;
                            box-shadow:0 0 10px #000;
                            /* 倒影：方向 偏移量 颜色渐变*/
                            -webkit-box-reflect: below 5px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5) 100%);
                            border-radius:5px;
                            transform:rotateY(0deg) translateZ(0px);
                        }
                        >p{
                            position: absolute;
                            left:50%;
                            top:185%;
                            margin-left:-600px;
                            margin-top:-600px;
                            /* border:1px solid red; */
                            width:1200px;
                            height:1200px;
                            border-radius:50%;
                            background:-webkit-radial-gradient(center center,600px 600px,rgba(122,122,122,0.2),rgba(0,0,0,0));
                            transform:rotateX(90deg);
                        }
                    }
                }
            `
        },
        // 获取自适应拖拽的核心代码
        getCodeValue2(){
            return `
                // 自适应拖拽
                initDrag(){
                    function getStyle(obj,attr){
                        if(obj.currentStyle){//Element.currentStyle在老版IE中可用
                            return obj.currentStyle[attr];
                        }else{
                            return getComputedStyle(obj,false)[attr];//获取属性值--当样式更改时，它会自动更新本身
                        };
                    };
                    function startMove(obj,json,fn){//json为含有css属性的配置项--表示该元素最终要回到的位置
                        clearInterval(obj.timer);
                        obj.timer=setInterval(function(){
                            let bStop=true;
                            for(let attr in json){
                                let iCur=0;
                                if(attr=="opacity"){
                                    iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
                                }else{
                                    iCur=parseInt(getStyle(obj,attr));//此值会随拖拽过程中不断变化
                                };
                                let iSpeed=(json[attr]-iCur)/8;//除的数值越小移动的越快
                                // console.log(json[attr]);//此值为固定值
                                iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
                                // console.log(attr,json,iCur,iSpeed,iCur+iSpeed);
                                if(iCur!=json[attr]){//当变量值等于最终位置值时，就停止
                                    bStop=false;
                                };
                                if(attr=="opacity"){
                                    obj.style.filter="alpha(opacity:"+(iCur+iSpeed)+")";
                                    obj.style.opacity=(iCur+iSpeed)/100;
                                }else{
                                    obj.style[attr]=iCur+iSpeed+"px";
                                };
                            };
                            if(bStop){
                                clearInterval(obj.timer);
                                if(fn){
                                    fn();
                                };
                            };
                        },30);
                    };
                    let oUl=document.getElementsByClassName("qilin-animation-drag-box")[0];//获取ul元素
                    // let oUl=document.getElementsByTagName("ul")[0];//获取ul元素
                    // console.log(window.getComputedStyle(oUl,false))
                    // console.log(oUl.currentStyle);
                    let aLi=oUl.getElementsByTagName("li");//获取ul元素下的所有li元素集合
                    let liPos=[];//每个li元素的位置
                    let liZindex=0;//设置li元素的索引--控制拖拽时元素在上方
                    //将浮动布局改成绝对定位
                    for(let i=0;i<aLi.length;i++){//获取每个li元素的位置
                        liPos[i]={
                            left:aLi[i].offsetLeft,
                            top:aLi[i].offsetTop
                        };
                    };
                    for(let i=0;i<aLi.length;i++){//将每个li元素设置为绝对定位
                        aLi[i].style.position="absolute";
                        aLi[i].style.left=liPos[i].left+"px";
                        aLi[i].style.top=liPos[i].top+"px";
                        aLi[i].style.margin=0;
                        aLi[i].index=i;//给每个元素赋予其索引
                    };
                    // console.log(liPos);
                    //给每个li元素绑定拖拽功能
                    for(let i=0;i<aLi.length;i++){
                        drag(aLi[i]);
                    };
                    function drag(obj){//拖拽功能事件
                        //鼠标按下去时触发
                        obj.onmousedown=function(e){
                            let event=e||window.event;//解决兼容性
                            let x1=event.clientX;//获取鼠标按下去的X坐标值
                            let y1=event.clientY;//获取鼠标按下去的Y坐标值
                            //获取li元素原来的left和top值
                            let _left=obj.offsetLeft;
                            let _top=obj.offsetTop;
                            obj.style.zIndex=++liZindex;//拖拽的元素始终在最上方
                            //当鼠标移动时图片跟着动
                            document.onmousemove=function(e){
                                let ev=e||window.event;
                                let x2=ev.clientX - x1 + _left;//移动时的鼠标x偏移量加上图片原来的x值
                                let y2=ev.clientY - y1 + _top;//移动时的鼠标y偏移量加上图片原来的y值
                                obj.style.left=x2+"px";
                                obj.style.top=y2+"px";
                                //碰撞成功就加上红色边框线
                                // for(let i=0;i<aLi.length;i++){
                                //     if(impact(obj,aLi[i]) && obj!=aLi[i]){
                                //         aLi[i].style.border="2px solid red";
                                //     }
                                // }
                                //碰撞成功就加上红色边框线--距离拖拽元素obj最近的的li元素
                                let li=near(obj);
                                for(let i=0;i<aLi.length;i++){//将所有的li元素红色边框线去除
                                    aLi[i].style.border="";
                                };
                                if(li){
                                    li.style.border="2px solid red";
                                };
                            };
                            //当鼠标抬起解绑鼠标事件,实现交换功能
                            document.onmouseup=function(){
                                document.onmousemove=null;
                                document.onmouseup=null;
                                //实现交换功能
                                let li=near(obj);
                                if(li){//如果有碰撞的话
                                    //碰撞成功的元素移动到拖拽元素的位置
                                    // console.log(obj.index);
                                    startMove(li,liPos[obj.index]);
                                    //拖拽元素移动到碰撞成功的元素的位置
                                    startMove(obj,liPos[li.index]);
                                    //交换后，交换元素的索引应该交换--两种交换数值的方法
                                    // let tmp=0;
                                    // tmp=obj.index;
                                    // obj.index=li.index;
                                    // li.index=tmp;
                                    let tmp=[obj.index,li.index];
                                    [li.index,obj.index]=[...tmp];
                                    li.style.border="";//碰撞成功完成后边框线就没了
                                }else{//如果没有碰撞的话
                                    startMove(obj,liPos[obj.index]);//就回到自己先前的位置
                                };
                            };
                            return false;//阻止浏览器默认的拖拽事件
                        };
                    };
                    //检测碰撞
                    function impact(obj1,obj2){//obj1为被碰撞元素，obj2为拖拽元素
                        let L1=obj1.offsetLeft;
                        let R1=obj1.offsetLeft+obj1.offsetWidth;
                        let T1=obj1.offsetTop;
                        let B1=obj1.offsetTop+obj1.offsetHeight;
                        let L2=obj2.offsetLeft;
                        let R2=obj2.offsetLeft+obj2.offsetWidth;
                        let T2=obj2.offsetTop;
                        let B2=obj2.offsetTop+obj2.offsetHeight;
                        if(R2<L1 || B2<T1 || L2>R1 || T2>B1){//满足这些条件均为没有碰撞到
                            return false;
                        }else{
                            return true;
                        };
                    };
                    //找到碰撞检测成功的距离拖拽元素最近的li元素
                    function near(obj){
                        let n=100000;//先设置一个足够大的数值
                        let nLi=null;
                        //先获取所有碰撞成功的li元素
                        for(let i=0;i<aLi.length;i++){
                            if(impact(obj,aLi[i]) && obj != aLi[i]){//碰撞成功的li元素进行与拖拽元素obj的距离比较
                                //获取碰撞成功的元素与拖拽元素obj的距离
                                let c=distance(obj,aLi[i]);
                                if(c<n){//最终n会等于距离最小的值
                                    n=c;
                                    nLi=aLi[i];//保存碰撞成功距离最近的li元素
                                };
                            };
                        };
                        return nLi;
                    };
                    //勾股定理计算距离
                    function distance(obj1,obj2){
                        //正负没关系，最终要平方
                        let a=obj1.offsetLeft-obj2.offsetLeft;
                        let b=obj1.offsetTop-obj2.offsetTop;
                        return Math.sqrt(Math.pow(a,2)+Math.pow(b,2));
                    };
                }
            `;
        }
    },
    methods:{
        // 3D旋转动画
        initRotate(){
            let oWrap=document.getElementById("wrap1");
            let aImg=oWrap.getElementsByTagName("img");
            //让盒子自适应的垂直居中
            (function mTop(){
                //获取浏览器窗口可视区域的高度
                // let H=document.documentElement.clientHeight;
                let H=Qilin.Element.getNodeHeight(".qilin-animation-rorate-box");
                // oWrap.style.marginTop=H/2 - 180 + "px";
                window.onresize=mTop;
            })();
            //图片初始动画
            let len=aImg.length;//获取图片个数
            let deg=360/len;//每张图片占的角度
            for(let i=0;i<len;i++){
                aImg[i].style.transform="rotateY("+i*deg+"deg) translateZ(350px)";
                aImg[i].style.transition="1s "+ (len-1-i)*0.1 + "s";
            };
            //鼠标事件（按下，移动，抬起）--拖拽旋转
            let lastX,lastY,nowX,nowY,minX,minY,roX=0,roY=0,timer;
            oWrap.onmousedown=function(e){
                clearInterval(timer);
                let event=e||window.event;
                //获取鼠标按下去的坐标位置
                lastX=event.clientX;
                lastY=event.clientY;
                this.onmousemove=function(e){
                    let ev=e||window.event;
                    //移动过程中鼠标的坐标位置
                    nowX=ev.clientX;
                    nowY=ev.clientY;
                    //计算出鼠标坐标的差值
                    minX=nowX-lastX;
                    minY=nowY-lastY;
                    //计算容器旋转的角度
                    roX -= minY*0.1;//当上下转的时候是围绕X轴转，应取反，随着鼠标的方向而转,乘0.1是使其转的慢点
                    roY += minX*0.2;//当左右转的时候是围绕Y轴转
                    //让整个图片容器围绕鼠标旋转
                    oWrap.style.transform="rotateX("+roX+"deg) rotateY("+roY+"deg)";
                    lastX=nowX;
                    lastY=nowY;
                };
                this.onmouseup=function(){
                    this.onmousemove=null;
                    this.onmouseup=null;
                    timer=setInterval(function(){//当鼠标松开后，会逐渐转动到停止
                        minX *=0.95;//让值逐渐减小
                        minY *=0.95;
                        roX -=minY*0.1;
                        roY +=minX*0.2;
                        oWrap.style.transform="rotateX("+roX+"deg) rotateY("+roY+"deg)";
                        //当minX达到足够小的值时清除定时器
                        if(Math.abs(minX)<0.1 && Math.abs(minY)<0.1){
                            clearInterval(timer);
                        };
                    },1000/60);
                };
                return false;//阻止浏览器默认拖拽功能
            }
        },
        // 自适应拖拽
        initDrag(){
            function getStyle(obj,attr){
                if(obj.currentStyle){//Element.currentStyle在老版IE中可用
                    return obj.currentStyle[attr];
                }else{
                    return getComputedStyle(obj,false)[attr];//获取属性值--当样式更改时，它会自动更新本身
                };
            };
            function startMove(obj,json,fn){//json为含有css属性的配置项--表示该元素最终要回到的位置
                clearInterval(obj.timer);
                obj.timer=setInterval(function(){
                    let bStop=true;
                    for(let attr in json){
                        let iCur=0;
                        if(attr=="opacity"){
                            iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
                        }else{
                            iCur=parseInt(getStyle(obj,attr));//此值会随拖拽过程中不断变化
                        };
                        let iSpeed=(json[attr]-iCur)/8;//除的数值越小移动的越快
                        // console.log(json[attr]);//此值为固定值
                        iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
                        // console.log(attr,json,iCur,iSpeed,iCur+iSpeed);
                        if(iCur!=json[attr]){//当变量值等于最终位置值时，就停止
                            bStop=false;
                        };
                        if(attr=="opacity"){
                            obj.style.filter="alpha(opacity:"+(iCur+iSpeed)+")";
                            obj.style.opacity=(iCur+iSpeed)/100;
                        }else{
                            obj.style[attr]=iCur+iSpeed+"px";
                        };
                    };
                    if(bStop){
                        clearInterval(obj.timer);
                        if(fn){
                            fn();
                        };
                    };
                },30);
            };
            let oUl=document.getElementsByClassName("qilin-animation-drag-box")[0];//获取ul元素
            // let oUl=document.getElementsByTagName("ul")[0];//获取ul元素
            // console.log(window.getComputedStyle(oUl,false))
            // console.log(oUl.currentStyle);
            let aLi=oUl.getElementsByTagName("li");//获取ul元素下的所有li元素集合
            let liPos=[];//每个li元素的位置
            let liZindex=0;//设置li元素的索引--控制拖拽时元素在上方
            //将浮动布局改成绝对定位
            for(let i=0;i<aLi.length;i++){//获取每个li元素的位置
                liPos[i]={
                    left:aLi[i].offsetLeft,
                    top:aLi[i].offsetTop
                };
            };
            for(let i=0;i<aLi.length;i++){//将每个li元素设置为绝对定位
                aLi[i].style.position="absolute";
                aLi[i].style.left=liPos[i].left+"px";
                aLi[i].style.top=liPos[i].top+"px";
                aLi[i].style.margin=0;
                aLi[i].index=i;//给每个元素赋予其索引
            };
            // console.log(liPos);
            //给每个li元素绑定拖拽功能
            for(let i=0;i<aLi.length;i++){
                drag(aLi[i]);
            };
            function drag(obj){//拖拽功能事件
                //鼠标按下去时触发
                obj.onmousedown=function(e){
                    let event=e||window.event;//解决兼容性
                    let x1=event.clientX;//获取鼠标按下去的X坐标值
                    let y1=event.clientY;//获取鼠标按下去的Y坐标值
                    //获取li元素原来的left和top值
                    let _left=obj.offsetLeft;
                    let _top=obj.offsetTop;
                    obj.style.zIndex=++liZindex;//拖拽的元素始终在最上方
                    //当鼠标移动时图片跟着动
                    document.onmousemove=function(e){
                        let ev=e||window.event;
                        let x2=ev.clientX - x1 + _left;//移动时的鼠标x偏移量加上图片原来的x值
                        let y2=ev.clientY - y1 + _top;//移动时的鼠标y偏移量加上图片原来的y值
                        obj.style.left=x2+"px";
                        obj.style.top=y2+"px";
                        //碰撞成功就加上红色边框线
                        // for(let i=0;i<aLi.length;i++){
                        //     if(impact(obj,aLi[i]) && obj!=aLi[i]){
                        //         aLi[i].style.border="2px solid red";
                        //     }
                        // }
                        //碰撞成功就加上红色边框线--距离拖拽元素obj最近的的li元素
                        let li=near(obj);
                        for(let i=0;i<aLi.length;i++){//将所有的li元素红色边框线去除
                            aLi[i].style.border="";
                        };
                        if(li){
                            li.style.border="2px solid red";
                        };
                    };
                    //当鼠标抬起解绑鼠标事件,实现交换功能
                    document.onmouseup=function(){
                        document.onmousemove=null;
                        document.onmouseup=null;
                        //实现交换功能
                        let li=near(obj);
                        if(li){//如果有碰撞的话
                            //碰撞成功的元素移动到拖拽元素的位置
                            // console.log(obj.index);
                            startMove(li,liPos[obj.index]);
                            //拖拽元素移动到碰撞成功的元素的位置
                            startMove(obj,liPos[li.index]);
                            //交换后，交换元素的索引应该交换--两种交换数值的方法
                            // let tmp=0;
                            // tmp=obj.index;
                            // obj.index=li.index;
                            // li.index=tmp;
                            let tmp=[obj.index,li.index];
                            [li.index,obj.index]=[...tmp];
                            li.style.border="";//碰撞成功完成后边框线就没了
                        }else{//如果没有碰撞的话
                            startMove(obj,liPos[obj.index]);//就回到自己先前的位置
                        };
                    };
                    return false;//阻止浏览器默认的拖拽事件
                };
            };
            //检测碰撞
            function impact(obj1,obj2){//obj1为被碰撞元素，obj2为拖拽元素
                let L1=obj1.offsetLeft;
                let R1=obj1.offsetLeft+obj1.offsetWidth;
                let T1=obj1.offsetTop;
                let B1=obj1.offsetTop+obj1.offsetHeight;
                let L2=obj2.offsetLeft;
                let R2=obj2.offsetLeft+obj2.offsetWidth;
                let T2=obj2.offsetTop;
                let B2=obj2.offsetTop+obj2.offsetHeight;
                if(R2<L1 || B2<T1 || L2>R1 || T2>B1){//满足这些条件均为没有碰撞到
                    return false;
                }else{
                    return true;
                };
            };
            //找到碰撞检测成功的距离拖拽元素最近的li元素
            function near(obj){
                let n=100000;//先设置一个足够大的数值
                let nLi=null;
                //先获取所有碰撞成功的li元素
                for(let i=0;i<aLi.length;i++){
                    if(impact(obj,aLi[i]) && obj != aLi[i]){//碰撞成功的li元素进行与拖拽元素obj的距离比较
                        //获取碰撞成功的元素与拖拽元素obj的距离
                        let c=distance(obj,aLi[i]);
                        if(c<n){//最终n会等于距离最小的值
                            n=c;
                            nLi=aLi[i];//保存碰撞成功距离最近的li元素
                        };
                    };
                };
                return nLi;
            };
            //勾股定理计算距离
            function distance(obj1,obj2){
                //正负没关系，最终要平方
                let a=obj1.offsetLeft-obj2.offsetLeft;
                let b=obj1.offsetTop-obj2.offsetTop;
                return Math.sqrt(Math.pow(a,2)+Math.pow(b,2));
            };
        }
    },
    mounted(){
        this.initRotate();
        this.initDrag();
    }
}
</script>
<style lang="less" scoped>
.qilin-animation{
    width: 100%;
    padding:0 10px 40px;
    .qilin-animation-rorate{
        height:700px;
        background-color:#222;
        perspective: 800px;
        // margin-top:75px;
        >.qilin-animation-rorate-box{
            position:relative;
            width:120px;
            height:180px;
            margin:auto;
            padding-top:180px;
            /* 设置3d环境 */
            transform-style: preserve-3d;
            >img{
                position: absolute;
                width:133px;
                height:200px;
                box-shadow:0 0 10px #000;
                /* 倒影：方向 偏移量 颜色渐变*/
                -webkit-box-reflect: below 5px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5) 100%);
                border-radius:5px;
                transform:rotateY(0deg) translateZ(0px);
            }
            >p{
                position: absolute;
                left:50%;
                top:185%;
                margin-left:-600px;
                margin-top:-600px;
                /* border:1px solid red; */
                width:1200px;
                height:1200px;
                border-radius:50%;
                background:-webkit-radial-gradient(center center,600px 600px,rgba(122,122,122,0.2),rgba(0,0,0,0));
                transform:rotateX(90deg);
            }
        }
    }
    .qilin-animation-drag{
        width:660px;
        margin:50px auto;
        height:700px;
        >.qilin-animation-drag-box{
            position:relative;
            >li{
                width:200px;
                height:200px;
                list-style: none;
                float:left;
                margin:10px;
                >img{
                    width:200px;
                    height:200px;
                }
            }
        }
    }
}
</style>